<template>
<!-- video属性playsinline="" x5-playsinline="" x-webkit-airplay="allow" 在ios中可以小窗播放，不会全屏 -->
  <div class="previewVideo" v-if="videoFlag" @click.stop="close">
    <div class="video-box" v-if="videoFlag">
      <video 
      :src="urlString"
      autoplay="true"
      controls="controls"
      @click.stop="stopChuantou" 
      >
          您的浏览器不支持 video 标签。
      </video>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
  }
</script>
<style lang="less" scoped>
.previewVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 7;
  background: rgba(0, 0, 0, 0.7);
  .video-box{
    position: relative;
    left: 0;
    z-index: 10;
  .close-btn {
    position: absolute;
    top: .45rem;
    left: 0;
    z-index: 11;
    display: inline-block;
    width: 2.4rem;
    height: 2.4rem;
    background: red;
    background-size: contain;
  }
  video {
    max-width: 100%;
    max-height: 100%;
    z-index: 999;
    // cursor: pointer;
  }   
}
}
</style>
